import React, { useState, useEffect, useImperativeHandle, forwardRef } from 'react';
import { Select, Input, Table } from 'antd';
import { cloneDeep } from 'lodash';

const CalculateCost = forwardRef((props, ref) => {
  const { value } = props;
  const [data, setData] = useState([]);

  useEffect(() => {
    value.feeRules && setData(value.feeRules);
  }, [value.feeRules]);

  useEffect(() => {
    const { thirdList } = value;
    const tempData = cloneDeep(data);
    // 新增时 thirdList为空 则置空
    if (!thirdList.length && !value.id) return setData([]);
    if (!tempData.length) {
      tempData[0] = { feeRuleType: 1 };
    }
    const thirdFeeRuleList = thirdList.map((item) => {
      const { id, feeRules } = item;
      let tempObj = {};
      if (feeRules.length) {
        const { feeRuleTypeLabel, code, name, id: feeRuleId } = feeRules[0];
        tempObj = {
          name,
          code,
          feeRuleId,
          feeRuleTypeLabel,
        };
      }
      tempObj['interfaceId'] = id;
      tempObj['interfaceName'] = item.name;
      return tempObj;
    });
    tempData[0].thirdFeeRuleList = thirdFeeRuleList;
    setData(tempData);
  }, [value.thirdList]);

  useImperativeHandle(ref, () => ({
    getData: () => data,
  }));

  const handleChange = (value, index, key) => {
    const tempData = data.slice();
    if (key === 'name' || key === 'code') {
      const reg = key === 'name' ? /[a-zA-Z0-9\u4e00-\u9fa5.]+/ : /[0-9a-zA-Z,]+/;
      const new_value = value.match(reg);
      tempData[index][key] = new_value ? new_value[0] : '';
      return setData(tempData);
    }
    tempData[index][key] = value;
    setData(tempData);
  };

  const columns = [
    {
      title: '数据源接口名',
      dataIndex: 'thirdFeeRuleList.interfaceName',
      render: (_, { thirdFeeRuleList }) =>
        thirdFeeRuleList && thirdFeeRuleList.map(({ interfaceName }, index) => <p key={index}>{interfaceName}</p>),
    },
    {
      title: '数据源计费参数名',
      dataIndex: 'thirdFeeRuleList.name',
      render: (_, { thirdFeeRuleList }) =>
        thirdFeeRuleList && thirdFeeRuleList.map(({ name }, index) => <p key={index}>{name || '-'}</p>),
    },
    {
      title: '码值',
      dataIndex: 'thirdFeeRuleList.code',
      render: (_, { thirdFeeRuleList }) =>
        thirdFeeRuleList && thirdFeeRuleList.map(({ code }, index) => <div key={index}>{code || '-'}</div>),
    },
    {
      title: '计费类型',
      dataIndex: 'thirdFeeRuleList.feeRuleType',
      render: (_, { thirdFeeRuleList }) =>
        thirdFeeRuleList &&
        thirdFeeRuleList.map(({ feeRuleTypeLabel }, index) => <div key={index}>{feeRuleTypeLabel || '-'}</div>),
    },
    {
      title: '数据源计费参数名',
      dataIndex: 'name',
      render: (text, _, index) => (
        <Input
          value={text}
          placeholder='请输入'
          maxLength={50}
          onChange={(e) => handleChange(e.target.value, index, 'name')}
        />
      ),
    },
    {
      title: '码值',
      dataIndex: 'code',
      render: (text, _, index) => (
        <Input
          value={text}
          placeholder='请输入'
          maxLength={50}
          onChange={(e) => handleChange(e.target.value, index, 'code')}
        />
      ),
    },
    {
      title: '计费类型',
      dataIndex: 'feeRuleType',
      render: (text, _, index) => (
        <Select placeholder='请选择' value={text} onChange={(value) => handleChange(value, index, 'feeRuleType')}>
          {['免费', '计次'].map((item, index) => (
            <Select.Option value={index} key={index}>
              {item}
            </Select.Option>
          ))}
        </Select>
      ),
    },
  ];

  return <Table dataSource={data} columns={columns} pagination={false} rowKey={(_, index) => index} />;
});
export default CalculateCost;
